<script setup lang="ts">
    import { defineAsyncComponent,reactive,ref,toRefs } from 'vue';
    import base from "@/utils/base";
    import { uploadImg } from '@/api/common/media';
    import request from "@/utils/request";
    import {notify} from '@/utils/element'
    import { Session } from '@/utils/storage';
    const Editor=defineAsyncComponent(()=>import('@/components/editor/index.vue'));


                            
    const formRef=ref();
    const state=reactive({
        loadding:false,//加载框
        visible:false,//隐藏显示
        formData:{} as any,
      roisfalg:{
                                                                                              yonghuzhanghao: false,
                                                            mima: false,
                                                            lianxifangshi: false,
                                                            yonghuxingbie: false,
                                                            yonghuxingming: false,
                              },
                                                                                                                                            yonghuxingbieOptions: [],
                                                                                                                                                                                                    title:'新增',
        type:'add'
    })
    const initData={

    }
    const {
        loadding,
        visible,
        formData,
        title,
        type,
      roisfalg
                                                                                                                                        , yonghuxingbieOptions
                                        
                                                                                                                                                        } = {...toRefs(state)};


    function open(title:string,type:string,formData?:any){

        state.title=title;
        state.type=type;
        state.formData={...formData,...initData};
        state.visible=true;


      if (state.type == 'cross') {
        var obj = Session.get('crossObj');
        for (var o in obj) {
                                                                                                      if (o == 'yonghuzhanghao') {
                    state.formData.yonghuzhanghao = obj[o];
                    state.roisfalg.yonghuzhanghao = true;
                    continue;
                  }
                                                              if (o == 'mima') {
                    state.formData.mima = obj[o];
                    state.roisfalg.mima = true;
                    continue;
                  }
                                                              if (o == 'lianxifangshi') {
                    state.formData.lianxifangshi = obj[o];
                    state.roisfalg.lianxifangshi = true;
                    continue;
                  }
                                                              if (o == 'yonghuxingbie') {
                    state.formData.yonghuxingbie = obj[o];
                    state.roisfalg.yonghuxingbie = true;
                    continue;
                  }
                                                              if (o == 'yonghuxingming') {
                    state.formData.yonghuxingming = obj[o];
                    state.roisfalg.yonghuxingming = true;
                    continue;
                  }
                                    }


      }
    }


    const emit = defineEmits(['refresh']);

    const close=()=>{
        state.visible=false;
    }

    function submitForm(){
        formRef.value?.validate((valid:boolean)=>{

            if(!valid) return;
            state.loadding=true;
          if (state.type == 'cross') {
            request({
              url:`yonghu/save`,
              method:'post',
              data:state.formData
            }).then(({data})=>{
              notify("操作成功",{type:'success'});
              state.loadding=false;
              close();
              emit("refresh");
            })
          }else{
            request({
              url:`yonghu/${!state.formData.id ? "save" : "update"}`,
              method:'post',
              data:state.formData
            }).then(({data})=>{
              notify("操作成功",{type:'success'});
              state.loadding=false;
              close();
              emit("refresh");
            })
          }




        })

    }

    defineExpose({
        open
    })


                    


                    


                    


                    


                    


                                                    state.yonghuxingbieOptions= "男,女".split(',')
                



    


                    


        


</script>

<template>
    <el-dialog :title="`${title}`" v-model="visible"
               center draggable :before-close="close" width="1000px"
               :close-on-click-modal="false" destroy-on-close>
        <div v-loading="loadding">
            <el-form ref="formRef" :model="formData"
                     label-width="85px" label-right="right"
                     label-suffix=":" status-icon
            >
                                                                                                            
                        <el-form-item label="用户账号" prop="yonghuzhanghao" :rules="{required: true, message: '用户账号为必填项！', trigger: 'blur'}">
                            <el-input v-model="formData.yonghuzhanghao" maxlength="30" clearable show-word-limit placeholder="请输入用户账号" :readonly="roisfalg.yonghuzhanghao"/>
                        </el-form-item>
                                                                                                                        

                                                        
                        <el-form-item label="密码" prop="mima" :rules="{required: true, message: '密码为必填项！', trigger: 'blur'}">
                            <el-input v-model="formData.mima" maxlength="30" clearable show-word-limit placeholder="请输入密码" :readonly="roisfalg.mima"/>
                        </el-form-item>
                                                                                                                        

                                                        
                        <el-form-item label="联系方式" prop="lianxifangshi" :rules="{required: true, message: '联系方式为必填项！', trigger: 'blur'}">
                            <el-input v-model="formData.lianxifangshi" maxlength="30" clearable show-word-limit placeholder="请输入联系方式" :readonly="roisfalg.lianxifangshi"/>
                        </el-form-item>
                                                                                                                        

                                                                                <el-form-item label="用户性别" prop="yonghuxingbie" :rules="{required: true, message: '用户性别为必选项！', trigger: 'blur'}">
                            <el-select
                                    v-model="formData.yonghuxingbie"
                                    clearable
                                    placeholder="请选择用户性别"
                                    style="width: 240px"
                            >
                                <el-option
                                        v-for="(item,index) in yonghuxingbieOptions"
                                        v-bind:key="index"
                                        :label="item"
                                        :value="item"
                                />
                            </el-select>
                        </el-form-item>

                                                        
                        <el-form-item label="用户姓名" prop="yonghuxingming" :rules="{required: true, message: '用户姓名为必填项！', trigger: 'blur'}">
                            <el-input v-model="formData.yonghuxingming" maxlength="30" clearable show-word-limit placeholder="请输入用户姓名" :readonly="roisfalg.yonghuxingming"/>
                        </el-form-item>
                                                                                                                        

                                    

                
            </el-form>
            <el-row justify="center" class="mt10">
                <el-button @click="close">取 消</el-button>
                <el-button @click="submitForm" type="primary">保 存</el-button>
            </el-row>
        </div>
    </el-dialog>








</template>

<style lang="scss" scoped>


                            
    .avatar-uploader{
        border:1px solid #e4e6e9
    }

    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
</style>
